<template>
  <div :class="classes">
    <el-tree class="xdh-tree" ref="elTree" :data="treeOptions" :props="treeProps" @check-change="handleNodeClick" :filter-node-method="filterNode" v-bind="treeProps"></el-tree>
  </div>
</template>
<script>
import { buildTree } from '@/utils/convert'
export default {
  props: {
    // 值
    value: {
      type: Array,
      default() {
        return []
      }
    },
    // 选项数据数组
    options: {
      type: Array,
      default() {
        return []
      }
    },
    // 数据父节点数据id值
    parentId: {
      type: [String, Number],
      default: null
    },
    // 是否多选
    multiple: {
      type: Boolean,
      default: true
    },

    // 树组件个性参数
    elTreeProps: Object,

    placeholder: {
      type: String,
      default: '请选择'
    },
    // 禁用
    disabled: Boolean,
    // 只读
    readonly: Boolean,
    idKey: {
      type: String,
      default: 'id'
    },
    parentIdKey: {
      type: String,
      default: 'parentId'
    },
    labelKey: {
      type: String,
      default: 'label'
    }
  },
  data() {
    return {
      checkedKeys: [],
      defaultProps: {
        children: this.defaultPropsKey,
        currentValue: [...this.value],
        label: this.labelKey,
        labelKeys: this.labelKey,
      }
    }
  },
  created() {
    this.labelKeys = this.labelKey == "" ? "label" : this.labelKey;
  },
  watch: {
    value(val) {
      this.currentValue = [...val]
    },
    query(val) {
      this.$refs.elTree.filter(val)
    }
  },
  computed: {
    classes() {
      return {
        'xdh-form-tree': true,
        'xdh-form-tree--disabled': this.disabled,
        'xdh-form-tree--readonly': this.readonly
      }
    },
    treeOptions() {
        var tree = buildTree(this.options, this.parentId, this.idKey, this.parentIdKey);
        // console.log(tree)
        this.getCheckKes(tree);
    //   console.log(buildTree(this.options, this.parentId, this.idKey, this.parentIdKey),this.options,this.labelKey,this.parentId, this.idKey, this.parentIdKey)
      return tree;
    },

    treeProps() {
      return {
        nodeKey: this.idKey,
        label: this.labelKeys,
        defaultCheckedKeys: [...this.checkedKeys],
        showCheckbox: this.multiple,
        highlightCurrent: !this.multiple,
        defaultExpandedKeys: [...this.checkedKeys],
        ...this.elTreeProps
      }
    },
  },
  methods: {
    diguiquchu(datas, arr, v, i, needdelarr) {
      //递归找出半选中的数据
      arr.map((item, index) => {
        if (item.id == v && item.children) {
          needdelarr.push(v);
          this.diguiquchu(datas, item.children, v, i, needdelarr);
        } else if (item.id != v && item.children) {
          this.diguiquchu(datas, item.children, v, i, needdelarr);
        }
      });
    },
    getCheckKes(list) {
      var rules = this.value;
      var needDelArr = [];
      // console.log('rules1111111',rules);
      rules.map((v, i) => {
        this.diguiquchu(
          rules,
          list,
          v,
          i,
          needDelArr
        );
      });
      // console.log('needDelArr',needDelArr);
      // console.log('rules2222',rules);

      rules = rules.filter(item => !needDelArr.includes(item));
      this.checkedKeys = rules;
      //  console.log('rules333333',rules);
      // console.log('this.checkedKeys',this.checkedKeys);

    },
    handleCheck(node, checked) {
      // 只对多选有效
      if (this.multiple) {
        this.currentValue = this.removeCheckedParent(checked.checkedKeys, checked.checkedNodes);
        const value = [...this.currentValue]
        this.$emit('input', value)
      }
    },
    handleChange(node) {
      // 只对单选有效
      if (this.multiple) return
      this.currentValue = [node[this.idKey]]
      const value = [...this.currentValue]
      this.$emit('input', value)

    },
    handleNodeClick(data) {
      // this.currentValue = this.$refs.elTree.getCheckedKeys();
      let rules = this.$refs.elTree.getCheckedKeys();
      rules = rules.concat(this.$refs.elTree.getHalfCheckedKeys());
      // console.log(rules)
      this.$emit('input', rules);
    },
    removeCheckedParent(keys = [], nodes = []) {
      return nodes.filter(n => {
        return !keys.includes(n[this.parentIdKey])
      }).map(n => n[this.idKey])
    },
    filterNode(value, data) {
      if (!value) return true
      return data[this.labelKeys].includes(value)
    },
  }
}
</script>
